const itemContainer = document.querySelector('.content');
console.log(itemContainer);
items = itemContainer.querySelectorAll('.item')
console.log(items);

// 获取第一行的高度
const itemHeight = items[0].offsetHeight;
console.log(itemHeight)

// 克隆第一行
const cloneItem = items[0].cloneNode(true);
console.log(cloneItem)
// 添加到最后一行
itemContainer.appendChild(cloneItem);

// 记录每一行的下标
let currentIndex = 0;

function wordScroll() {
  // 刚开始就上移
  currentIndex ++;
  // 计算需要滚动的高度
  const margin = `-${currentIndex * itemHeight}`;

  // 添加一个过渡的效果
  itemContainer.style.transition = '.5s';
  // 优化，使用transform
  itemContainer.style.transform = `translateY(${margin}px)`;

  // 如果当前显示的是最后一行，就重置
  if (currentIndex >= items.length){
    // 需要在过渡效果结束后重置
    setTimeout(() => {
      itemContainer.style.transition = "none";
      itemContainer.style.transform = "translateY(0)";
      currentIndex = 0;
    }, 500);
  }
}

setInterval(wordScroll, 1000);
